<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Index</title>
</head>

<body>
    <div class="loading">
        <!-- --i 是 CSS 的自定义属性, 通过 var 函数可以调用 -->
        <!-- --i: 代表动画延迟时间倍数 -->
        <span style="--i:1;"></span>
        <span style="--i:2;"></span>
        <span style="--i:3;"></span>
        <span style="--i:4;"></span>
        <span style="--i:5;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
    </div>

    <!-- 自定义滤镜 -->
    <svg>
        <!-- <filter> 标签用来定义 SVG 滤镜, 通过 id 进行调用 -->
        <filter id="gooey">
            <!-- <feGaussianBlur> 用于创建模糊滤镜 -->
            <feGaussianBlur in="SourceGraphic" stdDeviation="10">
            </feGaussianBlur>
            <!-- <feColorMatrix> 是过滤中的一种类型, 使用矩阵来影响颜色的每个通道(基于RGBA)。-->
            <feColorMatrix values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0 
            0 0 0 20 -10
        "></feColorMatrix>
        </filter>
    </svg>
</body>

</html>